<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
        a{
            width: 136px;
            height: 40px;
            background: #ffd9bc;
            color: #e5511d;
            text-decoration: none;
            text-align: center;
            line-height: 40px;
        
            display: block;
        }

        #box{
            width: 200px;
            height: 200px;
            background: orange;

            display: inline;
        }


        #b1, #i1{
            width: 200px;
            height: 50px;
        }

        #b1{
            background: skyblue;
            display: inline-block;
        }

        #i1{
            background: lightgreen;
            display: inline-block;
        }

        #pre{
            width: 100px;
            height: 100px;
            background: orange;

            /* display: none; */
            visibility: hidden;
        }

        #next{
            width: 100px;
            height: 100px;
            background: skyblue;
        }

    </style>
</head>
<body>
    <!--  
        1. 元素转换
            display: block      将当前元素转为 块级元素
                     inline      将当前元素转为 内联元素(行级元素)
                     inline-block 将当前元素转为  内联-块元素
                     table         将当前元素转为 块级table表格
                     table-cell   将当前元素转为 td单元格
                     none          隐藏当前元素 ( 不占位 )

        2. visibility: hidden     隐藏当前元素 ( 占位 )
                        visible    显示当前元素 
    -->
    <a href="http://www.baidu.com">立即购买</a>
    
    <div id="box">加入购物车</div>
    <span> 库存: 999件 </span>
    <hr>


    <div id="b1">程序员最讨厌的四件事: 写注释, 写文档, 别人不写注释, 别人不写文档</div>
    <span id="i1">决定一个程序员跳槽与否的关键因素是他前同事的现工资</span>

    
    <div id="pre"></div>
    <div id="next"></div>


</body>
</html>